<template>
<div>
  <v-card>
    <v-card-text>
      <v-simple-table>
        <tbody>
        <tr>
          <td>订单编号</td>
          <td>{{order.id}}</td>
        </tr>
        <tr>
          <td>支付编号</td>
          <td>{{order.payNo}}</td>
        </tr>
        <tr>
          <td>收款方</td>
          <td>{{order.businessName}}</td>
        </tr>
        <tr>
          <td>支付金额(单位:人民币-元)</td>
          <td>{{order.totalPrice/100}}</td>
        </tr>
        <tr>
          <td>状态</td>
          <td>
            <div v-if="order.status==0"><v-chip label outlined color="primary" small>未支付</v-chip> </div>
            <div v-else-if="order.status==1"><v-chip label outlined color="success" small>已支付</v-chip> </div>
            <div v-else-if="order.status==2">
              <v-chip label outlined color="error" small>退订中</v-chip>
              <v-btn class="ml-5" color="error" @click="handleUnsubscribe">允许退订</v-btn>
            </div>
            <div v-else-if="order.status==3"><v-chip label outlined color="error" small>已退订</v-chip> </div>
          </td>
        </tr>
        </tbody>
      </v-simple-table>
    </v-card-text>
  </v-card>
  <br/>
  <v-card>
    <v-card-text>
      <v-simple-table>
        <thead>
        <tr>
          <th>商品名称</th>
          <th>商品单价</th>
          <th>购买数量</th>
          <th>图片</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="goods in goodsList" :key="goods.id">
          <td>{{goods.goodsName}}</td>
          <td>{{goods.price/100}}</td>
          <td>{{goods.goodsNum}}</td>
          <td class="py-1">
            <v-avatar size="50" tile>
              <v-img :src="goods.image"/>
            </v-avatar>
          </td>
        </tr>
        </tbody>
      </v-simple-table>
    </v-card-text>
  </v-card>
</div>
</template>

<script>
import {selectOrderByOrderId, updateOrderStatusUnsubscribe} from "../../http/api/order";

export default {
  name: "OrderDetails",
  data:()=>({
    order:{},
    goodsList:[]
  }),
  computed:{
    orderId(){
      return this.$route.query.orderId
    }
  },
  created() {
    this.init()
  },
  methods:{
    init(){
      if (!this.orderId){
        return
      }
      selectOrderByOrderId(this.orderId).then(res=>{
        this.order = res.data;
        console.log(this.order)
        this.goodsList = res.data.orderGoodsList;
      })
    },
    handleUnsubscribe(){
      updateOrderStatusUnsubscribe(this.order.id).then(res=>{
        this.$breadstick.notify(res.data)
        this.init()
      })
    }
  }
}
</script>

<style scoped>

</style>